<!-- kpi达标趋势 -->
<template>
  <div class="bottom-echarts">
    <!--   各个kpi报表       -->
    <div class="e-item" v-for="(p,key) in dataPassRateListNew">
      <div class="e-item-title">
        <span>{{p.kpi_name}} 达标率趋势</span>
      </div>
      <div class="e-item-box">
        <div class="e-item-left-box">
          <basic-echarts-pie
              :chartData="chartDataBoxList[key]"
              @click="handlePage(p.kpi_name)"
          >
          </basic-echarts-pie>
        </div>
        <div class="e-item-right-box">
          <basic-echarts-bar
              :chartData="chartDataBoxE2[p.kpi_name]"
          ></basic-echarts-bar>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {IBase} from "@/api/interface/base";
import BasicEchartsPie from "@/components/basicEchartsPie.vue";
import BasicEchartsBar from "@/components/basicEchartsBar.vue";
import {nextTick, watch} from "vue";
import { getKpiReportRateApi, getKpiReportRateTrendApi} from "@/api/modules/base";
import formatDate from "@/utils/baseCfg";

defineOptions({
  name: 'passRateAndKpiView'
})

// 入参
const props = defineProps({
  params: {
    type: Object,
    default: () => {
      return {
        brand: null,
        create_date: null
      }
    }
  }
})

// kpi 达标所有数据
let dataPassRateListNew = ref([])
watch(
    () => props.params,
    async () => {
      await nextTick()
      // 重新组装饼图
      chartDataBoxList = []
      await getKpiReportRate()
    },
    {
      deep: true
    }
)
interface Base {
  [key: string | number]: IBase.bigScreenEcharts;  //动态添加属性
}
// kpi报表
let chartDataBoxE2:Base = reactive({});
// 占比
let chartDataBoxList = reactive([])
// 重新组装饼图
const setEcharts = () => {
  dataPassRateListNew.value.forEach(pass =>{
    const {kpi_name,kpi,...params} = pass
    const data = Object.values(params)[0]
    const passRate = Number(data.pass_rate.split('%')[0])
    chartDataBoxList.push([
          {value: passRate, name: '达标率'},
          {value: 100 - passRate, name: '未达标率'}
        ]
    )
  })
}

// 页面跳转
const handlePage = (kpi_name: string = '') => {
  window.location.href = `http://zst.zlocr.com:81/dashboard/complianceRate/analysisDetail?kpi_name=${kpi_name}`
}
// 达标率趋势
const getKpiReportRateTrend = async () => {
  // 开始时间
  const currentDate = new Date();
  currentDate.setDate(currentDate.getDate() - 30);
  // 请求参数
  const paramsNew = {
    brand: props.params.brand,
    start_date: formatDate(currentDate),
    end_date: props.params.create_date,
  }
  const {data: rateData} = await getKpiReportRateTrendApi(paramsNew)
  const keys = Object.keys(rateData)
  if(keys.length > 0){
    keys.forEach( i =>{
      chartDataBoxE2[i] = {
        data: {
          1: {
            data: Object.values(rateData[i]).sort().map(p=>p.split('%')[0]),
            type: 'line',
            lineColor: 'rgba(241, 196, 15, 1)', // 折现颜色
            colors: ['rgba(241, 196, 15, 0.1)','rgba(241, 196, 15, 0.01)']
          }
        },
        label:Object.keys(rateData[i]).sort(),
        name: [i],
        yAxisMinData:0,
        yAxisMaxData:100,
        solid: 'solid',
        yAxisNameFlag:true,
        yName:['单位:%']
      }
    })
  }
}
// 后端获取数据
const getKpiReportRate = async () => {
  // kpi达标率
  const {data: pass} = await getKpiReportRateApi(props.params)
  dataPassRateListNew.value = pass
  setEcharts()
  await getKpiReportRateTrend()
}
onMounted(() => {
  // 饼图
  getKpiReportRate()
})
</script>

<style lang="scss" scoped>

</style>
